<template>
  <div> 
       <van-form >
  <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
  <van-field v-model="phone" type="tel" name="手机" label="手机号" placeholder="请输入手机号"  maxlength="11" :rules="[{ required: true, message: '请填写手机' }]" />
  <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
   
	<van-row>
      <van-col span="16">
		  <van-field v-model="code" type="number" name="图形验证码" label="图形验证码" placeholder="请填写图形验证码"
		   :rules="[{ required: true, message: '请填写图形验证码' }]" />
	  </van-col> 
      <van-col span="8"> <CodeImg /></van-col>
    </van-row>
	<van-row>
	  <van-col span="16">
		  <van-field v-model="smsCode" type="number" name="smsCode" label="验证码" placeholder="验证码"
		   :rules="[{ required: true, message: '请填写验证码' }]" />
	  </van-col> 
	  <van-col span="8">   <van-button  size="small" type="primary" @click="sendCode">发送验证码</van-button></van-col>
	</van-row>
	
	 
  <div style="margin: 16px;">
  
  </div>
  <div style="margin: 16px;">
    <van-button round block type="primary" @click="onSubmit">注册</van-button>
  </div>
</van-form>
       
  </div>
</template>
<script >      
  import CodeImg from '../../components/CodeImg.vue'
import {mapState,mapMutations} from 'vuex';  
export default {
  components:{CodeImg},
  data(){
    return {
      username:'', phone:'', password:'', code:'', smsCode:'', 
    }
  },
  computed:{...mapState(['hash','uuid'])},
  created(){
          
		 this.nickName = "wzskyline"
		 this.username = "wzskyline"
		 this.phone = "13066668888"
		 this.password = "123456aa"
		  
  },
  methods: { ...mapMutations(['SetHash']),
  
  
	async sendCode(){
		if(this.regPhone(this.phone)) return;
		if(this.isEmpty(this.code)) return this.Toast('图形验证码不能为空')  
		var data = await this.post("/message/message/sendRegisterCode",{
			 "code": this.code,
			 "phone": this.encrypt(this.phone),
			 "uuid": this.uuid,
		 })  
	}, 
	async onSubmit(){ 
			if(this.isEmpty(this.nickName)) return this.Toast('昵称不能为空') 
			if(this.isEmpty(this.userName)) return this.Toast('用户名不能为空') 
			if(this.isEmpty(this.smsCode)) return  this.Toast( '手机验证码不能为空') 
			if(this.regPhone(this.phone)) return;
			if(this.regPassword(this.password)) return;
		  var data = await this.post("/register",{
			  "nickName": this.nickName,
			  "userName": this.userName,
			  "phonenumber": this.encrypt( this.phone,), 
			  "password": this.encrypt( this.password,), 
			  "roleId": 2,
			  "smsCode": this.smsCode,
		   }) 
	 }
  },
  mounted(){  
    this.SetHash(location.hash)
  }

}
</script>
<style scoped>
   
</style>